@{
    ViewData["Title"] = "选择物料";
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>@ViewData["Title"]</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="~/layui/css/layui.css">
</head>
<body>
    <div style="padding: 20px;">
        <div class="layui-row layui-col-space10">
            <!-- 左侧物料类型树 -->
            <div class="layui-col-md4">
                <fieldset class="layui-elem-field">
                    <legend>物料类型</legend>
                    <div class="layui-field-box" style="height: 600px; overflow-y: auto;">
                        <ul id="materialTypeTree" class="layui-tree"></ul>
                    </div>
                </fieldset>
            </div>

            <!-- 右侧物料列表 -->
            <div class="layui-col-md8">
                <fieldset class="layui-elem-field">
                    <legend>物料列表</legend>
                    <div class="layui-field-box">
                        <!-- 查询条件 -->
                        <div class="layui-form" lay-filter="searchForm" style="margin-bottom: 10px;">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <div class="layui-input-inline" style="width: 150px;">
                                        <input type="text" name="materielCode" placeholder="物料编码" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-input-inline" style="width: 150px;">
                                        <input type="text" name="materielName" placeholder="物料名称" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <button class="layui-btn layui-btn-sm" lay-submit lay-filter="search">
                                        <i class="layui-icon layui-icon-search"></i> 查询
                                    </button>
                                    <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">
                                        <i class="layui-icon layui-icon-refresh"></i> 重置
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- 物料表格 -->
                        <table class="layui-hide" id="materialTable" lay-filter="materialTable"></table>
                    </div>
                </fieldset>
            </div>
        </div>

        <!-- 操作按钮 -->
        <div style="text-align: center; margin-top: 20px;">
            <button type="button" class="layui-btn" id="btnConfirm">确定选择</button>
            <button type="button" class="layui-btn layui-btn-primary" onclick="parent.layer.closeAll()">取消</button>
        </div>
    </div>

    <script src="~/layui/layui.js"></script>
    <script>
        layui.use(['table', 'form', 'layer', 'tree'], function () {
            var $ = layui.jquery;
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            var tree = layui.tree;

            var selectedMaterial = null;
            var currentTypeId = null;

            // 初始化物料类型树
            loadMaterialTypeTree();

            // 初始化物料表格
            var tableIns = table.render({
                elem: '#materialTable',
                url: '/Procurement/GetMaterialSelect',
                cols: [[
                    { type: 'radio', width: 60 },
                    { field: 'materielCode', title: '物料编码', width: 120 },
                    { field: 'materielName', title: '物料名称', width: 150 },
                    { field: 'specifications', title: '规格型号', width: 120 },
                    { field: 'unit', title: '单位', width: 80 },
                    { field: 'materialTypeName', title: '类型', width: 100 }
                ]],
                page: true,
                limit: 10,
                limits: [10, 20, 50],
                height: 550
            });

            // 加载物料类型树
            function loadMaterialTypeTree() {
                $.get('/Procurement/GetMaterialTypeTree', function (result) {
                    if (result.success) {
                        tree.render({
                            elem: '#materialTypeTree',
                            data: result.data,
                            click: function (obj) {
                                currentTypeId = obj.data.id;
                                // 根据选中的类型过滤物料
                                tableIns.reload({
                                    where: { materielTypeld: currentTypeId },
                                    page: { curr: 1 }
                                });
                            }
                        });
                    }
                });
            }

            // 查询
            form.on('submit(search)', function (data) {
                var field = data.field;
                if (currentTypeId) {
                    field.materielTypeld = currentTypeId;
                }
                tableIns.reload({
                    where: field,
                    page: {
                        curr: 1
                    }
                });
                return false;
            });

            // 监听单选
            table.on('radio(materialTable)', function (obj) {
                selectedMaterial = obj.data;
            });

            // 确定选择
            $('#btnConfirm').on('click', function () {
                if (!selectedMaterial) {
                    layer.msg('请选择一个物料');
                    return;
                }

                // 调用父页面的回调函数
                if (parent.window.selectMaterialCallback) {
                    parent.window.selectMaterialCallback(selectedMaterial);
                }
                
                // 只关闭当前物料选择对话框
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
            });
        });
    </script>
</body>
</html> 